import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import './index.scss';
import Http from '../../axios/http';
import API from '../../api/index';

export default class App extends Component {
    state = {
        imgHeight: 300,
        slideIndex: 0,
        swiperList: [
            // {
            //     id: 1,
            //     img: 'https://dimg04.c-ctrip.com/images/700s0t000000iob5sD360_810_235_85.jpg'
            // },
            // {
            //     id: 2,
            //     img: 'https://dimg04.c-ctrip.com/images/700v0r000000hbqcv9617_810_235_85.jpg'
            // },
            // {
            //     id: 3,
            //     img: 'https://dimg04.c-ctrip.com/images/700d0s000000i6rzp61B8_810_235_85.jpg'
            // }
        ]
    }
    componentDidMount() {
        // 通过node 获取mongodb中的数据 
        Http.get(API.GET_SWIPER).then(res => {
            this.setState({
                swiperList: res.img_url
            })
        })
    }
    render() {
        return (
            <Carousel
                infinite
                autoplay
            >
                {(this.state.swiperList && this.state.swiperList.length) ? this.state.swiperList.map((item, index) => (
                    <img
                        src={item}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        onLoad={() => {
                        }}
                        key={index}
                    />
                )) : []
                }
            </Carousel>
        );
    }
}
